<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gateway跨域测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .test-section h3 {
            margin-top: 0;
            color: #555;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
            font-size: 14px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 15px;
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
            white-space: pre-wrap;
        }
        .success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .info {
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }
        .code {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚪 Gateway跨域策略测试</h1>
        
        <div class="test-section">
            <h3>📋 测试说明</h3>
            <p>这个页面用于测试Gateway的跨域配置。点击下面的按钮来测试不同的跨域场景。</p>
            <div class="code">
当前页面地址: <span id="currentOrigin"></span>
Gateway地址: http://localhost:12000
            </div>
        </div>

        <div class="test-section">
            <h3>🧪 基础跨域测试</h3>
            <p>测试从当前页面访问Gateway的API接口</p>
            <button onclick="testBasicCors()">测试基础跨域请求</button>
            <div id="basicResult" class="result"></div>
        </div>

        <div class="test-section">
            <h3>🔐 带认证的跨域测试</h3>
            <p>测试携带Authorization头的跨域请求</p>
            <button onclick="testAuthCors()">测试认证跨域请求</button>
            <div id="authResult" class="result"></div>
        </div>

        <div class="test-section">
            <h3>📊 预检请求测试</h3>
            <p>测试OPTIONS预检请求（复杂请求）</p>
            <button onclick="testPreflightCors()">测试预检请求</button>
            <div id="preflightResult" class="result"></div>
        </div>

        <div class="test-section">
            <h3>🔄 负载均衡测试</h3>
            <p>测试跨域请求的负载均衡效果</p>
            <button onclick="testLoadBalanceCors()">测试负载均衡</button>
            <div id="loadBalanceResult" class="result"></div>
        </div>

        <div class="test-section">
            <h3>📝 测试日志</h3>
            <div id="logResult" class="result info"></div>
        </div>
    </div>

    <script>
        // 显示当前页面地址
        document.getElementById('currentOrigin').textContent = window.location.origin;

        // 日志函数
        function log(message) {
            const logDiv = document.getElementById('logResult');
            const timestamp = new Date().toLocaleTimeString();
            logDiv.textContent += `[${timestamp}] ${message}\n`;
            logDiv.scrollTop = logDiv.scrollHeight;
        }

        // 基础跨域测试
        async function testBasicCors() {
            const resultDiv = document.getElementById('basicResult');
            resultDiv.className = 'result';
            resultDiv.textContent = '正在测试...';
            
            try {
                log('开始基础跨域测试');
                const response = await fetch('http://localhost:12000/user/getUserById/1', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.className = 'result success';
                    resultDiv.textContent = `✅ 基础跨域请求成功！\n\n状态码: ${response.status}\n响应数据: ${JSON.stringify(data, null, 2)}`;
                    log('基础跨域测试成功');
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = `❌ 请求失败\n\n状态码: ${response.status}\n状态文本: ${response.statusText}`;
                    log(`基础跨域测试失败: ${response.status}`);
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = `❌ 跨域请求失败\n\n错误信息: ${error.message}`;
                log(`基础跨域测试异常: ${error.message}`);
            }
        }

        // 认证跨域测试
        async function testAuthCors() {
            const resultDiv = document.getElementById('authResult');
            resultDiv.className = 'result';
            resultDiv.textContent = '正在测试...';
            
            try {
                log('开始认证跨域测试');
                const response = await fetch('http://localhost:12000/user/getUserById/1', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer token123'
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.className = 'result success';
                    resultDiv.textContent = `✅ 认证跨域请求成功！\n\n状态码: ${response.status}\n响应数据: ${JSON.stringify(data, null, 2)}`;
                    log('认证跨域测试成功');
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = `❌ 请求失败\n\n状态码: ${response.status}\n状态文本: ${response.statusText}`;
                    log(`认证跨域测试失败: ${response.status}`);
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = `❌ 跨域请求失败\n\n错误信息: ${error.message}`;
                log(`认证跨域测试异常: ${error.message}`);
            }
        }

        // 预检请求测试
        async function testPreflightCors() {
            const resultDiv = document.getElementById('preflightResult');
            resultDiv.className = 'result';
            resultDiv.textContent = '正在测试...';
            
            try {
                log('开始预检请求测试');
                const response = await fetch('http://localhost:12000/user/getUserById/1', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer token123',
                        'X-Custom-Header': 'test-value'
                    },
                    body: JSON.stringify({ test: 'data' })
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.className = 'result success';
                    resultDiv.textContent = `✅ 预检请求成功！\n\n状态码: ${response.status}\n响应数据: ${JSON.stringify(data, null, 2)}`;
                    log('预检请求测试成功');
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = `❌ 请求失败\n\n状态码: ${response.status}\n状态文本: ${response.statusText}`;
                    log(`预检请求测试失败: ${response.status}`);
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = `❌ 预检请求失败\n\n错误信息: ${error.message}`;
                log(`预检请求测试异常: ${error.message}`);
            }
        }

        // 负载均衡测试
        async function testLoadBalanceCors() {
            const resultDiv = document.getElementById('loadBalanceResult');
            resultDiv.className = 'result';
            resultDiv.textContent = '正在测试...';
            
            try {
                log('开始负载均衡跨域测试');
                const results = [];
                
                // 发送5次请求测试负载均衡
                for (let i = 1; i <= 5; i++) {
                    const response = await fetch('http://localhost:12000/user/getUserById/1', {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': 'Bearer token123'
                        }
                    });
                    
                    if (response.ok) {
                        const data = await response.json();
                        results.push(`请求 ${i}: ${data.userName}`);
                        log(`负载均衡请求 ${i} 成功: ${data.userName}`);
                    } else {
                        results.push(`请求 ${i}: 失败 (${response.status})`);
                        log(`负载均衡请求 ${i} 失败: ${response.status}`);
                    }
                    
                    // 短暂延迟
                    await new Promise(resolve => setTimeout(resolve, 500));
                }
                
                resultDiv.className = 'result success';
                resultDiv.textContent = `✅ 负载均衡跨域测试完成！\n\n${results.join('\n')}`;
                log('负载均衡跨域测试完成');
                
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = `❌ 负载均衡测试失败\n\n错误信息: ${error.message}`;
                log(`负载均衡跨域测试异常: ${error.message}`);
            }
        }

        // 页面加载时记录
        log('页面加载完成，准备开始跨域测试');
    </script>
</body>
</html> 